<template>
    <div>
        <!--面包屑导航-->
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item :to="{ path: '/administerhome/systemhomepage' }" class="breadCrumb">首页
            </el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>普通用户</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="nursing-management-main">
            <div class="operater-bar">
                <!--输入和选择区域-->
                <div class="input-select-field">
                    <div>
                        <el-text class="mx-1">姓名：</el-text>
                        <el-input v-model="pageInfo.name" placeholder="请输入姓名" />
                    </div>

                    <div>
                        <el-text class="mx-1">床号：</el-text>
                        <el-input v-model="pageInfo.bed" placeholder="请输入床号 " />
                    </div>

                </div>
                <!--按钮区域-->
                <div class="btn-field">
                    <el-button type="primary" @click="getnurse">搜索</el-button>
                </div>

            </div>
            <div class="table-field">
                <el-table :data="tableData" border stripe style="width: 100%">
                    <el-table-column prop="name" label="姓名" />
                    <el-table-column prop="idnumber" label="身份证号" />
                    <el-table-column prop="gender" label="性别" />
                    <el-table-column prop="phone" label="电话" />
                    <el-table-column prop="bed" label="床号" />
                    <el-table-column prop="operator" label="操作" width="240">
                        <template #default="scope">
                            <el-button type="primary" size="small" @click="getDetails(scope.row)">
                                详情
                            </el-button>
                            <el-button type="primary" size="small" @click="getEditDetails(scope.row)">
                                编辑
                            </el-button>
                            <!-- <el-button type="primary" size="small" color="red" @click="deleteNurse(scope.row)">
                                删除
                            </el-button> -->
                        </template>
                    </el-table-column>
                </el-table>
                <!--分页区域-->
                <el-pagination v-model:current-page="pageInfo.pageNum" v-model:page-size="pageInfo.pageSize" background
                    :page-sizes="[5, 10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="totalCount"
                    @current-change="handleSizeChange()" @size-change="handleCurrentChange()" />
            </div>
        </el-card>

        <!--查看详情的对话框-->
        <el-dialog v-model="detailsDialogVisible" title="详情" width="50%">
            <!--内容主体区域-->
            <el-form label-position="right" :model="detailsRow" label-width="90px" ref="detailsForm" status-icon>
                <el-row>
                    <el-form-item label="姓名">
                        <el-input v-model="detailsRow.name" type="text" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="身份证号">
                        <el-input v-model="detailsRow.idnumber" type="text" readonly></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="年龄">
                        <el-input v-model="detailsRow.age" type="text" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="手机号">
                        <el-input v-model="detailsRow.phone" type="text" readonly></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="床号">
                        <el-input v-model="detailsRow.bed" type="text" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="入院时间">
                        <el-input v-model="detailsRow.intime" type="text" readonly></el-input>
                    </el-form-item>
                </el-row>
               <el-row>
                <el-form-item label="健康状态">
                        <el-input v-model="detailsRow.health" type="text" readonly></el-input>
                    </el-form-item>
               <el-form-item label="紧急号码">
                <el-input v-model="detailsRow.familyPhone" type="text" readonly></el-input>
               </el-form-item>
               </el-row>
               <el-row>
                    <el-form-item label="性别">
                        <el-radio-group v-model="detailsRow.gender" disabled>
                            <el-radio value="男">男</el-radio>
                            <el-radio value="女">女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-row>

            </el-form>
        </el-dialog>
        <!-- 编辑对话框 -->
        <el-dialog v-model="editDialogVisible" title="编辑" width="50%">
            <!--内容主体区域-->
            <el-form label-position="right" :model="detailsRow" label-width="90px" :rules="editFormRules"
                ref="editFormRef" status-icon>
                <el-row>
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="detailsRow.name" type="text"></el-input>
                    </el-form-item>
                    <el-form-item label="身份证号" prop="idNumber">
                    <el-input v-model="detailsRow.idnumber" type="text"></el-input>
                </el-form-item>
                </el-row>
                
                <el-row>
                    <el-form-item label="年龄" prop="age">
                        <el-input v-model="detailsRow.age" type="text"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号" prop="phone">
                        <el-input v-model="detailsRow.phone" type="text"></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="床号" prop="bed">
                        <el-input v-model="detailsRow.bed" type="text"></el-input>
                    </el-form-item>
                    <el-form-item label="紧急号码" prop="familyPhone">
                        <el-input v-model="detailsRow.familyPhone" type="text"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="入院时间" prop="intime">
                        <el-input v-model="detailsRow.intime" type="text"></el-input>
                    </el-form-item> -->
                </el-row>
                <el-row>
                    <el-form-item label="健康状态" prop="health">
                        <el-input v-model="detailsRow.health" type="text"></el-input>
                    </el-form-item>
                    
                </el-row>
                <el-row>
                    <el-form-item label="性别" prop="gender">
                        <el-radio-group v-model="detailsRow.gender">
                            <el-radio value="男">男</el-radio>
                            <el-radio value="女">女</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    
                </el-row>
            </el-form>
            <!--底部区域-->
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="editDialogClosed" class="buttonClass" color="red">取 消</el-button>
                    <el-button type="primary" @click="editNurse" class="buttonClass" :bg="true">
                        确 定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>

</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ArrowRight, Plus, CirclePlusFilled } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
// 导入封装的接口方法
import * as administer from '../../api/administer'

let addDialogVisible = ref(false)
const addForm = reactive({
    username: '',
    name: '',
    password: '',
    gender: '男',
    telephone: '',
    intime: ''
})
const addFormRef = ref()
//验证手机号的规则
const checkMobile = (rule, value, cb) => {
    //验证手机号的正则表达式
    const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/

    if (regMobile.test(value)) {
        //合法的手机号
        return cb()
    }

    cb(new Error('请输入合法的手机号'))
}
const checkUsername = (rule, value, cb) => {
    if (value[0] === '1') {
        return cb()
    }
    cb(new Error('用户名必须以1开头'))
}
const checkNurseNumber = (rule, value, cb) => {
    if (value[0] === '0') {
        cb(new Error('工号不能以0开头'))
    }
    const check = /^[0-9]{1,10}$/;
    if (check.test(value)) {
        return cb()
    } else {
        cb(new Error('工号必须是长度1~10个数字'))
    }

}
const editFormRules = reactive({
    nurseNumber: [
        { required: true, message: '工号不能为空', trigger: 'blur' },
        // { min: 1, max: 10, message: '工号长度1~10个数字', trigger: 'blur' },
        { validator: checkNurseNumber, trigger: 'blur' },
    ],
    name: [
        { required: true, message: '姓名不能为空', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '密码不能为空', trigger: 'blur' },
        { min: 3, max: 10, message: '密码长度3~10个字符', trigger: 'blur' },
    ],
    phone: [
        { required: true, message: '手机号不能为空', trigger: 'blur' },
        { validator: checkMobile, trigger: 'blur' }
    ]
})
// const addFormRules = reactive({
//     username: [
//         { required: true, message: '用户名不能为空', trigger: 'blur' },
//         { min: 1, max: 10, message: '用户名长度1~10个字符', trigger: 'blur' },
//         { validator: checkUsername, trigger: 'blur' },
//     ],
//     name: [
//         { required: true, message: '姓名不能为空', trigger: 'blur' },
//     ],
//     password: [
//         { required: true, message: '密码不能为空', trigger: 'blur' },
//         { min: 3, max: 10, message: '密码长度3~10个字符', trigger: 'blur' },
//     ],
//     telephone: [
//         { required: true, message: '手机号不能为空', trigger: 'blur' },
//         { validator: checkMobile, trigger: 'blur' }
//     ]
// })

// 重置表单函数
function resetForm(formRef) {
    if (!formRef) return
    formRef.value.resetFields()
}

// const addDialogClosed = () => {
//     addDialogVisible.value = false
//     resetForm(addFormRef)
// }


const pageInfo = reactive({ name: '', pageNum: 1, pageSize: 5, bed: '' })
const totalCount = ref(0)
const tableData = ref([]);
//获取分页查询
const getnurse = () => {
    const getInfo = reactive({
        eldName: pageInfo.name,
        currentPage: pageInfo.pageNum,
        pageSize: pageInfo.pageSize,
        eldBed: pageInfo.bed,
    })
    administer.getNormalByPageAPI(getInfo).then((resp) => {
        if (resp.data.code !== 2000) {
            ElMessage({
                type: 'error',
                message: resp.data.message,
            })
            return
        }
        totalCount.value = resp.data.total;
        tableData.value = resp.data.data.map(item => ({
            id: item.eldId,
            idnumber: item.eldIdNum,
            name: item.eldName,
            gender: item.eldGender ==="1" ? '男' : '女',
            phone: item.eldPhone,

            age: item.eldAge, // 显示年龄
            bed: item.eldBed, // 床位号
            health: item.eldHealth=1?'健康':'不健康', // 健康状况
            familyPhone: item.eldFamilyPhone, // 家庭电话
            intime: item.eldIntime, // 入住时间
            nurseId: item.nurseId, // 护理人员ID
            state: item.eldState, // 状态
            accId: item.accId, // 账户ID
            createTime: item.createTime, // 创建时间
            updateTime: item.updateTime,// 更新时间
        }));
    })
}
const handleSizeChange = () => {
    getnurse();
}
const handleCurrentChange = () => {
    getnurse();
}

//查看详情
const detailsForm = ref();
const detailsDialogVisible = ref(false);
const detailsRow = ref({});
const getDetails = (row) => {
    detailsRow.value = JSON.parse(JSON.stringify(row))
    detailsDialogVisible.value = true
}
//删除
const deleteNurse = (row) => {
    const data = reactive({
        nurseId: row.id,
        accId: row.accId
    })
    nurse.deleteNurseByIdAPI(data).then((resp) => {
        if (resp.data.code !== 2000) {
            ElMessage({
                type: 'error',
                message: resp.data.message,
            })
            getnurse();
            return
        }
        ElMessage({
            type: 'success',
            message: '删除成功',
        })
        getnurse();
    })

}
//编辑
const editFormRef = ref();
const editDialogVisible = ref(false);
const editDialogClosed = () => {
    editDialogVisible.value = false
}
const getEditDetails = (row) => {
    detailsRow.value = JSON.parse(JSON.stringify(row))
    editDialogVisible.value = true
}
const editNurse = () => {
    editFormRef.value.validate((valid) => {
        if (valid) {
            const data = reactive({
            eldId: detailsRow.value.id,
            eldIdNum: detailsRow.value.idnumber,
            eldName: detailsRow.value.name,
            eldGender: detailsRow.value.gender==="男"?1:0,
            eldPhone: detailsRow.value.phone,
            eldAge: detailsRow.value.age, // 显示年龄
            eldBed: detailsRow.bed, // 床位号
            eldHealth: detailsRow.value.health=="健康"?true:false, // 健康状况
            eldFamilyPhone: detailsRow.value.familyPhone, // 家庭电话
            eldIntime: detailsRow.value.intime, // 入住时间
            });
         
console.log(data);
            administer.editNormalInfoAPI(data).then((resp) => {
                if (resp.data.code !== 2000) {
                    ElMessage({
                        type: 'error',
                        message: resp.data.message,
                    })
                    return
                } else {
                    ElMessage({
                        message: resp.data.message,
                        type: 'success',
                    })
                    editDialogVisible.value = false;
                    getnurse();
                }
            })
        }

    })
}
// 生命周期钩子
onMounted(() => {
    getnurse();
})

</script>

<style lang="less" scoped>
.el-breadcrumb {
    margin-bottom: 15px;
}

.nursing-management-main {
    width: 1175px;
    height: 575px;
}

.operater-bar {
    width: 100%;
    flex-direction: row;
    display: flex;
}

.input-select-field {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    width: 750px;
}

.table-field {
    width: 100%;
    margin-top: 15px;
}

.el-input {
    width: 150px;
}

.el-select {
    width: 150px;
}

.btn-field {
    width: 350px;
    display: flex;
    justify-content: flex-end;

    >.el-button {
        margin-left: 10px;
        margin-right: 10px;
    }
}

.el-pagination {
    margin-top: 15px;
}
</style>